<template>

    <el-form :model="formData"  :rules="rules" ref="formRef">
        <el-form-item label="商品名称" prop="name">
            <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="副标题" prop="subName">
            <el-input v-model="formData.subName" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
            <el-select v-model="formData.status" placeholder="Select" size="large" style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        
        <el-form-item label="图片" prop="img">
            <el-space wrap>
                <Tuku v-model:modelValue="formData.img1"></Tuku>
                <Tuku v-model:modelValue="formData.img2"></Tuku>
                <Tuku v-model:modelValue="formData.img3"></Tuku>
                <Tuku v-model:modelValue="formData.img4"></Tuku>
                <Tuku v-model:modelValue="formData.img5"></Tuku>
                <Tuku v-model:modelValue="formData.img6"></Tuku>
            </el-space>
        </el-form-item>

        <el-form-item label="分类" prop="categoryId">
            <el-select v-model="formData.categoryId" placeholder="Select" size="large" style="width: 240px">
                <el-option v-for="item in categoryIdoption" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>

        <el-form-item label="设置价格" >
            <PriceEdit v-model:modelValue="formData.price"></PriceEdit>
        </el-form-item>

        <el-form-item label="标签" prop="tag">
            <el-space wrap>
                <el-tag v-for="tag in formData.tags" :key="tag" closable :disable-transitions="false"
                @close="handleClose(tag)">
                {{ tag }}
            </el-tag>
            <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
                @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
            <el-button v-else class="button-new-tag" size="small" @click="showInput">
                + New Tag
            </el-button>
            </el-space>
            
        </el-form-item>
        <el-form-item label="排序" prop="seq">
            <el-input-number v-model="formData.seq" :min="1" />
        </el-form-item>
        <el-form-item label="备注" prop="brief">
            
            <Editor v-model="formData.brief"></Editor>
        </el-form-item>
        <el-form-item label="更新人" prop="lastUpdateBy">
            <el-input v-model="formData.lastUpdateBy" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onCheckAndSubmit(formRef)">保存</el-button>

            <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>

    </el-form>
</template>

<script setup lang="ts">

import { ElMessage } from 'element-plus'
import Editor from '@/components/Editor.vue'

import Tuku from '@/components/Tuku.vue'
import PriceEdit from '@/components/PriceEdit.vue'

const route = useRoute()
const inputVisible = ref(false)
const inputValue = ref('')
const InputRef = ref()
const formRef = ref();
const formData = reactive<any>({
    id: 0,
    name: "",
    subName: "",
    status: 1,
    brief: "",
    img: "",
    img1: "",
    img2: "",
    img3: "",
    img4: "",
    img6: "",
    img5: "",
    tags: [""],
    categoryId: 0,
    seq: 1,
})

const options = [
    {
        value: 1,
        label: '上架中',
    },
    {
        value: 2,
        label: '未上架',
    }
]

const categoryIdoption = ref(
    [{
        value: 1,
        label: '男装',
    },
    {
        value: 2,
        label: '女装',
    }]
)



onMounted(()=>{
    formData.id = route.params.id
    callProductApi()
})

const callProductApi = () => {
    productApi.select({id: formData.id}).then((response: any)=>{

        let res = response[0]
        formData.name = res.name
        formData.subName = res.subName
        formData.status = res.status
        formData.brief = res.brief
        
        for (let i = 1; i <= res.img.length; i++) {
                formData['img' + i] = res.img[i - 1]
        }

        formData.tags = res.tags
        formData.categoryId = res.categoryId
        formData.seq = res.seq
    })
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleClose = (tag: string) => {
  formData.tags.splice(formData.tags.indexOf(tag), 1)
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    formData.tags.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}


const onsubmit = () => {
    // console.log('formData',formData)

    let imgArr: any = []

    for (let i = 1; i <= 6; i++) {
        if (formData['img' + i] != "") {
            imgArr.push(formData['img' + i])
        }
    }

    if (imgArr.length < 1) {
        ElMessage.error('请上传图片')
        return
    }

    let body: any = {}
    body.id = formData.id
    body.name = formData.name
    body.subName = formData.subName
    body.status = formData.status
    body.brief = formData.brief
    body.img = formData.img1 + "," + formData.img2 + "," + formData.img3 + "," + formData.img4 + "," + formData.img5 + "," + formData.img6
    body.seq = formData.seq
    body.categoryId = formData.categoryId
    body.lastUpdateBy = formData.lastUpdateBy
    productApi.update(body).then((res: any) => {
        ElMessage.success('保存成功')
    })

    /*  http.post('/api/product', formData).then((res:any) => {
         ElMessage.success('新增成功')
     }) */
}

const onCheckAndSubmit = async (formEl: any) => {

    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            onsubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: any) => {
    formEl.resetFields()
}

const rules = reactive<any>({
    name: [
        { required: true, message: '请输入商品名称', trigger: 'blur' }
    ],
    subName: [
        { required: true, message: '请输入副标题', trigger: 'blur' }
    ],
    brief: [
        { required: true, message: '请输入备注', trigger: 'blur' }
    ],
    img: [
        { required: true, message: '请输入图片', trigger: 'blur' }
    ],
    lastUpdateBy: [
        { required: true, message: '请输入更新人', trigger: 'blur' }
    ]
})
</script>